<template>
  <el-table :data="tableData" height="95%" style="width: 100%" border>
    <el-table-column prop="date" label="日期" width="90" align="center" />
    <el-table-column prop="elementName" label="要素名称" width="200" align="center" />
    <el-table-column prop="elementCategory" label="要素类别" width="80" align="center" />
    <el-table-column prop="elementStatus" label="要素状态" width="70" align="center">
      <template #default="{ row }">
        <el-tag :type="row.elementStatus === 1 ? 'success' : 'danger'">
          {{ row.elementStatus === 1 ? '有效' : '无效' }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {
  getCrimeElementTypeList
} from '@/api/flaud/crimeelementtype'

interface ElementItem {
  date: string
  elementName: string
  elementCategory: string
  elementStatus: number 
}

onMounted(() => {
  getTableData()
})
const page = ref(0)
const total = ref(0)
const pageSize = ref(0)
const tableData1 = ref<ElementItem[]>([]) 
const searchInfo = ref({})
const tableData = ref<ElementItem[]>([]) 

const getTableData = async () => {
  const table = await getCrimeElementTypeList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData1.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize

    tableData.value = tableData1.value.map(item => ({
      date: item.CreatedAt,
      elementName: item.elementName,
      elementCategory: item.elementCategory,
      elementStatus: item.elementStatus 
    }))
  }
  console.log(tableData1.value)
}
</script>

<style scoped>
.el-table {
  margin: 10px auto;
}
</style>
